{include file="public/header-static"/}
{include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card bor" style="height: 100%;">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">用户数据</div>
                                        <div class="u-rig">
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="k"></text>
                                                    <text class="str">本周新增</text>
                                                </div>
                                                <div class="bg-str">
                                                    {$users_data.usersWeek.weekCreate}
                                                </div>
                                            </div>
                                            <!--											<div class="u-left">-->
                                            <!--												<div class="bg-txt">-->
                                            <!--													<text class="h"></text>-->
                                            <!--													<text class="str">本周活跃度</text>-->
                                            <!--												</div>-->
                                            <!--												<div class="bg-str">-->
                                            <!--													565-->
                                            <!--												</div>-->
                                            <!--											</div>-->
                                        </div>
                                    </div>
                                    <canvas id="post"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card bor" style="height: 100%;">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">社群数据</div>
                                    </div>
                                    <div class="d-fix">
                                        <div class="total-d">
                                            <div class="u-left mt-top">
                                                <div class="bg-txt">
                                                    <text class="k color-total"></text>
                                                    <text class="str">社群总数</text>
                                                </div>
                                                <div class="bg-str mt5">
                                                    <text class="fnt-30">{$resource_data.countResource}</text>
                                                    个
                                                </div>
                                            </div>
                                            <div class="u-left">
                                                <div class="bg-txt">
                                                    <text class="h color-z"></text>
                                                    <text class="str">昨日新增</text>
                                                </div>
                                                <div class="bg-st mt5">
                                                    <text class="fnt-30">{$resource_data.yesTodayResource}</text>
                                                    个
                                                </div>
                                            </div>
                                        </div>
                                        <div class="rig-img">
											<canvas  id="communityData" width="151" height="151"></canvas>
                                            <!-- <img src="__STATIC__/assets/media/image/hx.png"> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card bor" style="height: 100%;">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">涨知识数据</div>
                                    </div>
                                    <div class="total-name">
                                        <div class="num">总数量：
                                            <text class="num">{$article_data.countArticle}</text>
                                        </div>
                                        <div class="visit">总访问：
                                            <text>{$article_data.countArticleViews}</text>
                                        </div>
                                    </div>
                                    <canvas id="up-kno" height="125"></canvas>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="row mt-20">
                        <div class="col-md-6" >
                            <div class="card bor" style="height: 500px;">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">需求数据</div>
                                    </div>
                                    <div class="bg-txt male">
                                        <text class="k color-total"></text>
                                        <text class="str">当日新增</text>
                                        <text class="d-add">{$requirementsForm.todayRequirementsForm}</text>
                                    </div>
                                    <div class="head-dfix">
                                        <div class="d-left">
                                            <canvas id="xuqiu" width="150" height="150"></canvas>
                                        </div>
                                        <div class="tab-list">

                                            {volist name="$requirementsForm['requirementsFormCate']" id="val"}
                                            <div class="tabname">
                                                <div class="yuan" style="background:{$val.color}"></div>
                                                <div class="c-name">
                                                    {$val.name}
                                                </div>
                                                <div class="c-num">
                                                    {$val.nums}
                                                </div>
                                            </div>
                                            {/volist}

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <input id="datas" type="hidden" value="{$requirementsForm.line_data.datas}" name="datas">

                        <div class="col-md-6">
                            <div class="card bor" style="height: 500px;">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">订单数据</div>
                                    </div>
                                    <!-- <div class="order-list"> -->
                                    <div class="order-row">
                                       <div class="order-item">
                                            <div class="order-d" style="flex: 1;">
                                                <div class="o-title">订单总金额</div>
                                                <div class="order-price color-l">
                                                    <text>{$order_data.totalPayPrice.integer}</text>
                                                    <text class="order-x color-l">.{$order_data.totalPayPrice.decimal}
                                                    </text>
                                                </div>
                                            </div>
                                            <div class="order-d"  style="flex: 1;">
                                                <div class="o-title">当日订单金额</div>
                                                <div class="order-price color-h">
                                                    <text>{$order_data.todayPayPrice.integer}</text>
                                                    <text class="order-x color-h">.{$order_data.todayPayPrice.decimal}
                                                    </text>
                                                </div>
                                            </div>
                                       </div> 
                                       
                                       <div class="order-item">
                                            <div class="order-bor" style="margin-right: 37px;">
                                                <div class="tk-num">
                                                    -
                                                    <text>{$order_data.totalRefundPrice.integer}</text>
                                                    <text class="order-x">.{$order_data.totalRefundPrice.decimal}</text>
                                                </div>
                                                <text class="tk-str">总退款</text>
                                            </div>
                                            <div class="order-bor">
                                                <div class="tk-num">
                                                    -
                                                    <text>{$order_data.todayRefundPrice.integer}</text>
                                                    <text class="order-x">.{$order_data.todayRefundPrice.decimal}</text>
                                                </div>
                                                <text class="tk-str">当天退款</text>
                                            </div>
                                       </div>
                                    </div>

                                    <div class="order-row">
                                        <div class=" order-item" style="background: #FDFBF2FF;padding: 10px;">
                                            <div class="vip-d">
                                                <img src="https://yunliuns.oss-cn-shenzhen.aliyuncs.com/yunlink4.0admin/vip-logo.png"
                                                     class="vip-img">
                                            </div>
                                            <div class="d-rig">
                                                <div class="ord-tit">8.8元月会员</div>
                                                <div class="price">+{$order_data.memberMonthTodayPrice}</div>
                                            </div>
                                            <div class="rig">
                                                {$order_data.memberMonthPrice}
                                            </div>
                                        </div>
                                        <div class=" order-item" style="background: #FDFBF2FF;">
                                            <div class="vip-d">
                                                <img src="https://yunliuns.oss-cn-shenzhen.aliyuncs.com/yunlink4.0admin/vip-logo.png"
                                                     class="vip-img">
                                            </div>
                                            <div class="d-rig">
                                                <div class="ord-tit">108元年会员</div>
                                                <div class="price">+{$order_data.memberYearTodayPrice}</div>
                                            </div>
                                            <div class="rig">
                                                {$order_data.memberYearPrice}
                                            </div>
                                        </div>
                                    </div>


                                    <div class="order-row">
                                        <div class="order-item" style="background:#FCF6F2FF;padding: 10px;">
                                            <div class="vip-d">
                                                <img src="https://yunliuns.oss-cn-shenzhen.aliyuncs.com/yunlink4.0admin/vip-logo1.png"
                                                     class="vip-img">
                                            </div>
                                            <div class="d-rig">
                                                <div class="ord-tit">社群礼包</div>
                                                <div class="price">+{$order_data.resourceTodayPrice}</div>
                                            </div>
                                            <div class="rig">
                                                {$order_data.resourceTotalPrice}
                                            </div>
                                        </div>
                                        <div class="order-item" style="background: #F5F7FDFF;flex: 1;padding: 10px;margin-right: 0;position: relative;">
                                            <div class="vip-d">
                                                <img src="https://yunliuns.oss-cn-shenzhen.aliyuncs.com/yunlink4.0admin/vip-logo12.png"
                                                     class="vip-img">
                                            </div>
                                            <div class="d-rig">
                                                <div class="ord-tit">订阅需求</div>
                                                <div class="price" style="display: flex; justify-content: space-between;flex-wrap: wrap;">
                                                    <text>+{$order_data.demandTodayPrice}</text>
                                                    <span class="color-h-clor">-{$order_data.demandRefundPrice}</span>

                                                </div>
                                            </div>
                                            <div class="rig">
                                                {$order_data.demandTotalPrice}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="order-row">
                                        <div class="order-item" style="background:#F5F7FDFF;padding: 10px;">
                                            <div class="vip-d">
                                                <img src="https://yunliuns.oss-cn-shenzhen.aliyuncs.com/yunlink4.0admin/vip-logo1.png"
                                                     class="vip-img">
                                            </div>
                                            <div class="d-rig">
                                                <div class="ord-tit">精准找资源</div>
                                                <div class="price">+6.00</div>
                                            </div>
                                            <div class="rig">
                                                288.00
                                            </div>
                                        </div>
                                       
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>

<script>
// 社群数据
        var chartDom = document.getElementById('communityData');
	    var myChart = echarts.init(chartDom);
	    var option = {
	          title: '', 
			  tooltip: {
                trigger: 'item',
			  },
			   legend: {
                    orient: 'vertical',
					top: '10%',
					left: '10%',
                    // y:'center',
                    itemWidth : 12,
                    itemHeight : 12,
                    itemGap: 25,
                    textStyle:{
                        color : '#000',
                        fontWeight : 'bold',
                        fontSize: 18,
                        width:20,
                        height:20,
                        rich:{
                            a: {
                                color: '#999',
                                lineHeight: 20,
                            },
                            b:{
                                fontSize:16
                            }
                        }
                    }
				},
	        //    color: ['#5B78FFFF',  '#E6A500FF'],  //手动设置每个图例的颜色
	           //环形中间文字
	           graphic: [
	               //第一行文字
	               //内容 + 位置
	               {
	                   type: 'text',
	                   left: '29%',
	                   top: '40%',
	                   style: {
	                       //value当前进度
	                    //    text: "9998",
	                       textAlign: 'center',
	                       fill: '#19191A',
	                       fontSize: 34,
	                       fontWeight: 'bold'
	                   }
	               },
	               //第二行文字
	               //内容 + 位置
	               {
	                   type: 'text',
	                   left: '34%',
	                   top: '56%',
	                   style: {
	                       //maxValue进度条最大值
	                    //    text: '总收入',
	                       textAlign: 'center',
	                       fill: '#19191A',
	                       fontSize: 16
	                   }
	               }
	           ],
	           series: [ //系列列表
                    {
                        type: 'pie',
                        radius: ['80%', '70%'],//['外圆大小', '内圆大小']
                        center: ['60%', '50%'],//圆心位置['左右'， '上下']
                        hoverAnimation: false,//取消鼠标悬停动画
                        animationEasing: 'cubicOut',//设置动画缓动效果
                        //取消显示饼图自带数据线条
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        label:{
						 show: false,
						 position: 'left'
					    },
                        //增加阴影效果
                        itemStyle: {
                            normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
	                           label: {  //饼图图形上的文本标签
	                               show: false  //平常不显示
	                           },
	                           labelLine: {     //标签的视觉引导线样式
	                               show: false  //平常不显示
	                           }
	                       },
                        },
                        data: [
                            //(maxValue进度条最大值 - value当前进度) + 颜色
                            {
                                value: 0,
                                itemStyle: {
                                    normal: {
                                        color: '#E0E0E0'
                                    }
                                },
                            },
				            //value当前进度 + 颜色
				            {
				                value: "{$resource_data.countResource}",
				                itemStyle: {
				                    normal: {
				                        color: '#5B78FFFF'
				                    }
				                },
                                // name : ''
				            },
                        ]
                    },
                    {
                        type: 'pie',
                        radius: ['50%', '40%'],//['外圆大小', '内圆大小']
                        center: ['60%', '50%'],//圆心位置['左右'， '上下']
                        hoverAnimation: false,//取消鼠标悬停动画
                        animationEasing: 'cubicOut',//设置动画缓动效果
                        //取消显示饼图自带数据线条
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        label:{
						 show: false,
						 position: 'left'
					    },
                        //增加阴影效果
                        itemStyle: {
                            normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
	                           label: {  //饼图图形上的文本标签
	                               show: false  //平常不显示
	                           },
	                           labelLine: {     //标签的视觉引导线样式
	                               show: false  //平常不显示
	                           }
	                       },
                        },
                        data: [
                            //(maxValue进度条最大值 - value当前进度) + 颜色
                            {
                                value: "{$resource_data.yesTodayLastResource}",
                                itemStyle: {
                                    normal: {
                                        color: '#E0E0E0'
                                    }
                                },
                                name: ''


                            },
				            //value当前进度 + 颜色
				            {
				                value: "{$resource_data.yesTodayResource}",
				                itemStyle: {
				                    normal: {
				                        color: '#E6A500FF'
				                    }
				                },
                                name: ''
				            },
                        ]
                    },

	           ]
            
	       };
	 myChart.setOption(option);



    // 涨知识数据
    let articleLabels = "{$article_data['articleWeek']['labels']}";
    let articleData = "{$article_data['articleWeek']['datas']}";
    console.log(articleLabels, articleLabels.split(','), articleData.split(','));
    let data2 = {
        labels: articleLabels.split(','),
        datasets: [
            {
                label: "本周新增文章",
                backgroundColor: "#F2FBFF",
                borderWidth: 1,
                pointBackgroundColor: "#F2FBFF",
                pointBorderColor: "#F9F6FF",
                borderColor: "#406CE5",
                pointRadius: 0,
                lineTension: 0,
                spanGaps: 5,
                data: articleData.split(',')
            }
        ]
    };
    new Chart(document.getElementById("up-kno"), {
        type: 'line',
        data: data2,
        options: {
            title: {
                display: true,
            },
            legend: {display: false},
            splitLine: {show: false},
            elements: {
                line: {
                    tension: 0 // 禁用贝塞尔曲线
                }
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display: false,
                        color: "#F5F5F5",
                    },
                    // 负数处理
                    ticks: {
                        beginAtZero: true,
                        userCallback: function (label, index, labels) {
                            // when the floored value is the same as the value we have a whole number
                            if (Math.floor(label) === label) {
                                return label;
                            }
                        },
                    }
                }]
            }
        }
    });

    // 用户数据
    let usersLabels = "{$users_data['usersWeek']['labels']}";
    let usersData = "{$users_data['usersWeek']['datas']}";
    console.log(usersLabels, usersLabels.split(','), usersData.split(','));
    let order_week = "6";
    let order_yesterday = "7";
    let order_realtime = "8";
    if (order_week <= 0 && order_yesterday <= 0 && order_realtime <= 0) {
        order_week = 1;
        order_yesterday = 1;
        order_realtime = 1;
    }
    let data1 = {
        labels: usersLabels.split(','),
        datasets: [
            {
                label: "本周新增用户",
                backgroundColor: "#F2FBFF",
                borderWidth: 1,
                pointBackgroundColor: "#F2FBFF",
                pointBorderColor: "#F9F6FF",
                borderColor: "#406CE5",
                pointRadius: 0,
                lineTension: 0,
                spanGaps: 5,
                data: usersData.split(',')
            },
            // {
            // 	label: "本周活跃度",
            // 	backgroundColor: "#F9F6FF",
            // 	pointBackgroundColor:"#F9F6FF",
            // 	pointBorderColor: "#FF00FF",
            // 	borderColor: "#FF00FF",
            // 	pointRadius: 0,
            // 	lineTension: 0,
            // 	borderWidth: 1,
            // 	spanGaps: 5,
            // 	data: [8, 3, 10, 5, 15, 8, 17]
            // },
        ]
    };
    new Chart(document.getElementById("post"), {
        type: 'line',
        data: data1,
        options: {
            title: {
                display: true,
            },
            legend: {display: false},
            splitLine: {show: false},
            elements: {
                line: {
                    tension: 0 // 禁用贝塞尔曲线
                }
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display: true,
                        color: "#F5F5F5",
                    },
                    // 负数处理
                    ticks: {
                        beginAtZero: true,
                        userCallback: function (label, index, labels) {
                            // when the floored value is the same as the value we have a whole number
                            if (Math.floor(label) === label) {
                                return label;
                            }
                        },
                    }
                }]
            }
        }
    });

    function HTMLDecode(text) {
        var temp = document.createElement("em");
        temp.innerHTML = text;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    }

    // 需求数据
    var chartDom = document.getElementById('xuqiu');
    var myChart = echarts.init(chartDom);
    var nums = "{$requirementsForm.countRequirementsForm}";
    var colors = "{$requirementsForm.line_data.colors}";
    var str = $('#datas').val().split(';');
    var arr = [];
    for (var i in str) {
        // 转换成对象
        var obj = eval('(' + str[i] + ')');
        console.log(obj);
        arr.push(obj)
    }
    console.log(arr);

    var option;
    option = {
        tooltip: {
            show: true,
            trigger: 'item'
        },
        color: colors.split(','),
        series: [
            {
                name: '需求数据',
                type: 'pie',
                radius: ['73%', '85%'],
                avoidLabelOverlap: false,
                hoveranination: false,
                silent: true,
                label: {
                    normal: {
                        show: true,
                        position: 'center',
                        formatter: function (argument) {
                            var html;
                            html = nums + '\r\n\r\n' + '需求总数';
                            return html;
                        },
                        textStyle: {
                            fontSize: 15,
                            color: '#19191A',
                            fontWeight: 600
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: arr
            }
        ]
    };
    console.log(option.series[0].data);
    option && myChart.setOption(option);
</script>
<style>
    .card-dth {
        padding: 8px;
    }

    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
    }

    .user {
        display: flex;
        justify-content: space-between;
    }

    .u-rig {
        display: flex;
        justify-content: space-between;
        /*width: 50%;*/
        /*margin-right: 20px;*/
    }

    .u-left {
        text-align: center;
    }

    .bg-txt {
        display: flex;
        text-align: center;
    }

    .k {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .h {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .str {
        font-size: 12px;
        margin-left: 7px;
        color: #999999;
    }

    .bg-str {
        margin-top: 6px;
        color: #000000;
        font-weight: bold;
        font-size: 16px;
    }

    .rig-img {
        margin: 15px;
    }

    .rig-img img {
        width: 9rem;
        height: 9rem;
    }

    .mt-top {
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .fnt-30 {
        font-size: 25px;
    }

    .mt5 {
        margin-top: 5px;
    }

    .color-total {
        background: #5B78FF !important;
    }

    .color-z {
        background: #E6A500 !important;
    }

    .total-name {
        margin-left: 11px;
        margin-top: 10px;
    }

    .num {
        font-size: 16px;
        color: #000000;
        font-family: 'AliM';
    }

    .visit {
        color: #0DA877;
        font-size: 15px;
        margin-top: 7px;
        font-family: 'AliM';
    }

    .mt-20 {
        margin-top: 40px;
    }

    .male {
        margin-left: 12px;
        margin-top: 15px;
    }

    .d-add {
        color: #000000;
        margin-left: 7px;
        font-size: 18px;
        font-weight: 600;
    }

    .head-dfix {
        width: 96%;
        margin: auto;
        padding-top: 31px;
        display: flex;
    }

    .tab-list {
        margin-left: 80px;
        margin-top: 10px;
        width: 100%;
    }

    .tabname {
        display: inline-block;
        width: 30%;
        position: relative;
        margin-bottom: 20px;
    }

    .yuan {
        width: 8px;
        height: 8px;
        background: red;
        border-radius: 20px;
        position: absolute;
        left: -12px;
        top: 5px;
    }

    .c-name {
        color: #2F3133;
        font-size: 13px;
    }

    .c-num {
        margin-top: 2px;
        color: #2F3133;
        font-weight: 600;
    }

    .order-row {
        width: 96%;
        margin: auto;
        display: flex;
        padding-top: 30px;
    }
    .order-item {
        display: flex;
        align-items: center;
        width: 45%;
        margin-right: 20px;
        font-size: 13px;
        font-family: Source Han Sans CN;
    }

    .order-list {
        width: 96%;
        padding-top: 30px;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }

    .o-title {
        color: #999999;
        font-size: 13px;
        font-family: Source Han Sans CN;
    }

    .order-price {
        margin-top: 6px;
        color: #5B78FF;
        font-weight: 600;
        font-size: 20px;
    }

    .color-l {
        color: #5B78FF;
    }

    .color-h {
        color: #E6A500;
    }

    .order-x {
        font-size: 10px;
    }

    .order-bor {
        height: 72px;
        min-width: 75px;
        border: 2px solid #FF3A3A;
        padding: 0px 5px 0px 5px;
        border-radius: 65px;
        text-align: center;
        padding-top: 15px;
    }

    .tk-num {
        color: #FF3A3A;
        font-family: 'AliM';
        font-size: 17px;
    }

    .tk-str {
        color: #B8B8B8;
        font-size: 10px;
    }

    .order-vip {
        width: 48%;
        background: #FDFBF2;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .vip-d {
        width: 20%;
        margin-right: 10px;
    }

    .vip-img {
        width: 52px;
        height: 52px;
    }

    .d-rig {
        width: 40%;
    }

    .ord-tit {
        color: #666666;
        font-size: 10px;
    }

    .price {
        margin-top: 10px;
        font-size: 18px;
        color: #0DA877;
    }

    .rig {
        width: 30%;
        color: #17181A;
        font-weight: 600;
        line-height: 25px;
        font-size: 18px;
        text-align: right;
        transform: translateY(12px);
    }

    .color-h-clor {
        margin-left: 10px;
        color: #FF3A3A;
        /* position: absolute;
        left: 50%; */
        bottom: 13px;
        font-size: 18px;
    }
</style>
</body>
</html>